<template>
	<view class="apply-container">
		<!-- 申请列表 -->
		<view class="apply-list">
			<view class="apply-item" v-for="(item, index) in applyList" :key="index">
				<view class="apply-header">
					<text class="vehicle-number">{{getVehicleName(item.vehicleId)}}</text>
					<text class="apply-status" :class="getStatusClass(item.checkStatus)">
						{{getStatusText(item.checkStatus)}}
					</text>
				</view>
				<view class="apply-content">
					<view class="info-row">
						<text class="label">申请人：</text>
						<text class="value">{{username}}</text>
					</view>
					<view class="info-row">
						<text class="label">驾驶员：</text>
						<text class="value">{{getDriverName(item.driverId)}}</text>
					</view>
					<view class="info-row">
						<text class="label">联系方式：</text>
						<text class="value">{{getDriverPhone(item.driverId)}}</text>
					</view>
					<view class="info-row">
						<text class="label">出车时间：</text>
						<text class="value">{{item.usageTime}}</text>
					</view>
					<view class="info-row">
						<text class="label">归还时间：</text>
						<text class="value">{{item.returnTime}}</text>
					</view>
					<view class="info-row">
						<text class="label">申请理由：</text>
						<text class="value">{{item.tripReason}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-if="applyList.length === 0">
			<image src="/static/empty.png" mode="aspectFit"></image>
			<text>暂无申请记录</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getTripList, getDataList } from '@/api/data'

const applyList = ref([])
const vehicleList = ref([])
const driverList = ref([])
const userId = uni.getStorageSync('userId')
const username=uni.getStorageSync('username')

// 获取车辆名称
const getVehicleName = (vehicleId) => {
	const vehicle = vehicleList.value.find(v => v.vehicleId === vehicleId)
	return vehicle ? vehicle.licensePlate : '-'
}

const getDriverName = (driverId) => {
	const driver = driverList.value.find(d=>d.driverId===driverId)
	return driver ? driver.name : '-'
}

const getDriverPhone = (driverId) => {
	const driver = driverList.value.find(d=>d.driverId===driverId)
	return driver ? driver.phone : '-'
}
// 获取状态样式类
const getStatusClass = (status) => {
	switch(status) {
		case 0: return 'status-pending'
		case 1: return 'status-approved'
		case 2: return 'status-rejected'
		default: return ''
	}
}

// 获取状态文本
const getStatusText = (status) => {
	switch(status) {
		case 0: return '待审批'
		case 1: return '已通过'
		case 2: return '已拒绝'
		default: return '未知状态'
	}
}

// 获取申请列表
const getApplyList = async () => {
	try {
		const res = await getTripList({
			pageSize: 1,
			pageNum: 1000,
			userId: userId
		})
		
		if (res.code === 200) {
			applyList.value = res.data.records
		} else {
			throw new Error(res.message || '获取申请列表失败')
		}
	} catch (error) {
		console.error('获取申请列表失败：', error)
		uni.showToast({
			title: error.message || '获取申请列表失败',
			icon: 'none'
		})
	}
}

// 获取车辆列表
const getData = async () => {
	try {
		const res = await getDataList()
		if (res.code === 200) {
			vehicleList.value = res.data.vehicleInfoList
			driverList.value = res.data.driverInfoList
		}
	} catch (error) {
		console.error('获取车辆列表失败：', error)
	}
}

// 下拉刷新
const onPullDownRefresh = async () => {
	try {
		currentPage.value = 1
		await Promise.all([getApplyList(), getVehicles()])
		uni.showToast({
			title: '刷新成功',
			icon: 'success'
		})
	} catch (error) {
		uni.showToast({
			title: '刷新失败',
			icon: 'none'
		})
	} finally {
		uni.stopPullDownRefresh()
	}
}

// 触底加载更多
const onReachBottom = async () => {
	currentPage.value++
	try {
		const res = await getTripList({
			pageSize: pageSize,
			pageNum: currentPage.value,
			userId: userId
		})
		
		if (res.code === 200) {
			if (res.data.records.length > 0) {
				applyList.value = [...applyList.value, ...res.data.records]
			} else {
				currentPage.value--
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				})
			}
		}
	} catch (error) {
		currentPage.value--
		console.error('加载更多失败：', error)
	}
}

onMounted(() => {
	getData()
	getApplyList()
})

defineExpose({
	onPullDownRefresh,
	onReachBottom
})
</script>

<style>
.apply-container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.apply-item {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.apply-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #eee;
}

.vehicle-number {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.apply-status {
	font-size: 24rpx;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
}

.status-pending {
	background-color: #e6f7ff;
	color: #1890ff;
}

.status-approved {
	background-color: #f6ffed;
	color: #52c41a;
}

.status-rejected {
	background-color: #fff2f0;
	color: #ff4d4f;
}

.apply-content {
	padding-top: 20rpx;
}

.info-row {
	display: flex;
	margin-bottom: 10rpx;
}

.info-row .label {
	width: 160rpx;
	color: #666;
	font-size: 28rpx;
}

.info-row .value {
	flex: 1;
	color: #333;
	font-size: 28rpx;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100rpx 0;
}

.empty-state image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-state text {
	color: #999;
	font-size: 28rpx;
}
</style>